<template>
	<view class="container">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/banner.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/banner.png"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="list">
			<view v-for="(item,index) in list" class="item" @click="goNav(item,index)">
				<image class="pic" :src="item.pic"></image>
				<view class="text">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		jsTicket,
		scanLogin,
		scanConfirm
	} from '@/api/login.js'
	import {
		registerDevice,
		sipConfigAll
	} from '@/api/device.js'
	import {
		getWxLoginCode
	} from '@/utils/login.js'
	export default {
		data() {
			return {
				list: [{
					name: "登录",
					pic: "../../static/icons/swipe-action.png",
				}, {
					name: "扫码登录",
					pic: "../../static/icons/sm.png"
				}, {
					name: "绑定设备",
					pic: "../../static/icons/sm.png"
				}],
				sipConfig: []
			}
		},
		onLoad(query) {
			jsTicket().then(({
				data
			}) => {
				this.$wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: data.appId, // 必填，公众号的唯一标识
					timestamp: data.timestamp, // 必填，生成签名的时间戳
					nonceStr: data.nonceStr, // 必填，生成签名的随机串
					signature: data.signature, // 必填，签名
					jsApiList: [
						"scanQRCode"
					] // 必填，需要使用的JS接口列表
				});
			})
		},
		watch: {},
		methods: {
			goNav(item, index) {
				switch (index) {
					case 0:
						this.login();
						break;
					case 1:
						this.scanLogin();
						break;
					case 2:
						//注册设备到平台
						this.scanBindDevice();
						break;
					default:
						break;
				}
			},
			scanBindDevice() {
				if (this.sipConfig.length == 0) {
					sipConfigAll().then(res => {
						this.sipConfig = res.data
						this.selectSipConfig()
					})
				} else {
					this.selectSipConfig()
				}
			},
			selectSipConfig() {
				if(this.sipConfig.length == 0) {
					uni.showToast({
						title: "请配置sip服务",
						icon: "none"
					})
					return;
				}
				const itemList = this.sipConfig.map(row => {
					let header = row.proto ? 'wss': 'ws'
					return `${header}://${row.host}:${row.port}`
				})
				uni.showActionSheet({
					itemList: itemList,
					// 字体颜色
					itemColor: "#55aaff",
					success: (res) => {
						// 选择其中任意一项后，获取其索引（res.tapIndex），从0开始
						this.scanDevice(this.sipConfig[res.tapIndex])
					},
					fail: (res) => {
						// 取消后的操作
					}
				})
			},
			scanDevice(sipRow) {
				// 扫描二维码，绑定设备
				this.$wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: res => {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
						uni.showToast({
							title:result
						})
						var ress = JSON.parse(result);
						uni.showToast({
							title:ress
						})
						registerDevice(ress, sipRow.id).then((res) => {
							// console.log(res);
							if (res.data == true) {
								uni.showToast({
									title: "注册成功",
									icon: "none"
								})
							} else {
								uni.showToast({
									title: "已经注册过了",
									icon: "none"
								})
							}
						}).catch(e => {
							uni.showToast({
								title: e
							})
						})
					}
				});
			},
			login() {
				getWxLoginCode()
			},
			scanLogin() {
				this.$wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: res => {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
						scanLogin(result).then((res) => {
							this.scanConfirm(result)
						}).catch(e => {
							uni.showToast({
								title: e
							})
						})
					}
				});
			},
			scanConfirm(accessToken) {
				uni.showModal({
					title: "扫码成功",
					content: "是否登录？",
					success: res => {
						const params = {
							accessToken: accessToken,
							state: 1
						}
						if (res.confirm) {
							params.state = 1
							uni.showLoading({
								title: "正在登录中",
								mask: true
							})
						}
						if (res.cancel) {
							params.state = 0
						}
						scanConfirm(params).then(res => {
							if (params.state == 1) {
								this.$store.dispatch('setToken', res.msg);
								uni.showToast({
									title: "登录成功",
									success: () => {
										setTimeout(() => {
											uni.switchTab({
												url: "/pages/index/index"
											})
										}, 1500)
									}
								})
							}
						}).catch(e => {
							uni.showToast({
								title: "登录失败"
							})
						})

						if (params.state == 0) {
							uni.showToast({
								title: "取消登录",
								icon: "exception"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		overflow: hidden;
		margin-top: 20px;

		.item {
			float: left;
			width: 25%;

			uni-image {
				width: 50px;
				height: 50px;
				display: block;
				margin: 0 auto;
			}

			.text {
				margin-top: 10px;
				text-align: center;
			}
		}
	}

	uni-swiper {
		height: 180px;
	}

	.banner {
		uni-image {
			width: 100%;
			height: 180px;
		}
	}
</style>